<template>
  <div class="app-container">
    <!-- 查询start -->
    <div class="filter-container">
      <el-select v-model="queryParams.bloggerType" placeholder="请选择分类" clearable>
        <el-option
          v-for="item in typeList"
          :key="item.name"
          :label="item.name"
          :value="item.name"
        />
      </el-select>
      <el-select v-model="queryParams.audit" placeholder="审核状态" clearable>
        <el-option :value="0" label="未审核" />
        <el-option :value="1" label="已审核" />
      </el-select>
      <el-input v-model="queryParams.followerMax" type="number" placeholder="最大粉丝数" clearable style="width: 200px;" class="filter-item" />
      <el-input v-model="queryParams.followerMin" type="number" placeholder="最小粉丝数" clearable style="width: 200px;" class="filter-item" />
      <el-input v-model="queryParams.idName" placeholder="抖音ID" style="width: 300px;" clearable class="filter-item" />
      <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
    </div>
    <div style="padding:10px 0;">
      <label>已审核: {{ audit.processed }}</label>&nbsp;&nbsp;&nbsp;<label>未审核: <span style="color: red">{{ audit.unProcessed }}</span></label>&nbsp;&nbsp;&nbsp;<label>查询返回结果: <span>{{ searchCount }}</span></label>
    </div>
    <!-- 查询end -->
    <!-- 表格start -->
    <el-table ref="table" v-loading.body="listLoading" :cell-style="rowStyle" style="margin-top: 10px" :data="list" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column label="系统ID" width="180px">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column label="播主名称/ID">
        <template slot-scope="scope">
          {{ scope.row.onickname }}
        </template>
      </el-table-column>
      <el-table-column label="ID">
        <template slot-scope="scope">
          {{ scope.row.ouniqueId }}
        </template>
      </el-table-column>
      <el-table-column label="粉丝数" width="100px">
        <template slot-scope="scope">
          <span>{{ scope.row.ofollowerCount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="简介">
        <template slot-scope="scope">
          {{ scope.row.osignature }}
        </template>
      </el-table-column>
      <el-table-column label="近十个视频" align="center" width="300px">
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.awemes" :key="index" style="float:left;width: 100%">
            <div class="photo">
              <a :href="item.oshareUrl" target="_blank"><img :src="item.odynamicCover" style="width: 60px;height: 90px;"></a>
            </div>
            <div class="intro">
              <span>{{ item.odesc }}</span>
              <span>{{ getDate(item.ocreateTime) }}</span>
              <div>
                <span>点赞:{{ item.odiggCount }}</span><span>&nbsp;</span>
                <span>评论:{{ item.ocommentCount }}</span>
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="200px">
        <template slot-scope="scope">
          <div v-for="(item, index) in typeList" :key="index">
            <input v-model="typeRadio[scope.row.id]" :name="scope.row.id" :value="item.name" type="radio" @change="radioClick(scope.row.id,item.name)"><label>{{ item.name }}</label>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作2" align="center" width="200px">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.bloggerTypeAuditStatus != 0" type="success">通过</el-tag>
          <el-tag v-else type="info">未审核</el-tag>
          <el-button v-if="scope.row.bloggerTypeAuditStatus == 0 && scope.row.bloggerType != '' && scope.row.bloggerType != null" type="primary" size="small" icon="el-icon-success" @click="radioClick(scope.row.id)">通过</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格end -->
    <div class="is-background" style="">
      <el-button style="width:100%" type="warning" plain :disabled="listLoading" @click="fetchData">加载更多</el-button>
    </div>
  </div>
</template>
<style>
  .photo{
    float:left;
    width:20%;
  }
  .intro{
    float:right;
    padding-left: 20px;
    width:80%;
    text-align: left;
  }
</style>

<script>
import { getList, examine, examineCount } from '@/api/blogger/examine'
import { getList as typeList } from '@/api/blogger/type'
import { formatDate, deepClone } from '@/utils'

export default {
  data() {
    return {
      list: [],
      lastListId: '',
      typeRadio: {},
      queryParams: {
        followerMax: '',
        followerMin: '',
        idName: '',
        audit: 0,
        bloggerType: ''
      },
      audit: {
        processed: 0,
        unProcessed: 0
      },
      searchCount: 0,
      typeList: null,
      listLoading: true
    }
  },
  created() {
    this.fetchData()
    this.fetchTypeData()
    this.setExamineCount()
    this.getSearchCount(this.queryParams)
  },
  methods: {
    search() {
      this.list = []
      this.lastListId = ''
      this.fetchData()
      this.getSearchCount(this.queryParams)
      this.setExamineCount()
    },
    fetchData() {
      this.listLoading = true
      const params = this.queryParams
      params.lastId = this.lastListId
      this.getLists(params).then(response => {
        response.forEach(d => {
          this.list.push(d)
          this.typeRadio[d.id] = d.bloggerType
        })
        this.listLoading = false
        this.lastListId = this.list[this.list.length - 1].id
      })
    },
    getLists(params) {
      return new Promise((resolve, reject) => {
        getList(params).then(response => {
          resolve(response)
        }).catch(error => {
          reject(error)
        })
      })
    },
    fetchTypeData() {
      typeList().then(response => {
        this.typeList = response
      })
    },
    rowStyle() {
      return { 'vertical-align': 'top' }
    },
    radioClick(bloggerId, typeStr,) {
      const params = {}
      params.bloggerId = bloggerId
      if (typeStr !== undefined) {
        params.typeStr = typeStr
      }
      examine(params).then(() => {
        this.list.forEach(d => {
          if (d.id === bloggerId) {
            d.bloggerTypeAuditStatus = 1
          }
          this.audit.unProcessed -= 1
          this.audit.processed += 1
        })
      })
    },
    getDate(time) {
      return formatDate(time, 'yyyy.MM.dd')
    },
    getSearchCount(params) {
      this.getExamineCount(params).then(response => {
        this.searchCount = response
      })
    },
    setExamineCount() {
      const params = deepClone(this.queryParams)
      params.audit = 1
      this.getExamineCount(params).then(response => {
        this.audit.processed = response
      })
      const params2 = deepClone(this.queryParams)
      params2.audit = 0
      this.getExamineCount(params2).then(response => {
        this.audit.unProcessed = response
      })
    },
    getExamineCount(params) {
      return new Promise((resolve, reject) => {
        examineCount(params).then(response => {
          resolve(response)
        }).catch(error => {
          reject(error)
        })
      })
    }
  }
}
</script>
